<template>
  <div id="add-guest">
    <div class="info">
      <el-input class="w-400" v-model="addGuestForm.guestQQ" placeholder="请输入QQ号"></el-input>
      <i @click="getInfoByQQ" class="el-icon-circle-plus-outline fz-40 cursor-pointer"></i>
      <div class="icon w-40 h-40 m-l-10 m-r-10">
        <img width="40" class="border-r" v-if="addGuestForm.guestIcon" :src="addGuestForm.guestIcon" alt="头像">
        <i v-else class="el-icon-picture-outline-round fz-40"></i>
      </div>
      <el-input class="w-550 m-r-10" v-model="addGuestForm.guestName" placeholder="自动获取昵称"></el-input>
      <el-input v-model="addGuestForm.guestEmail" placeholder="自动添加邮箱"></el-input>
    </div>
    <el-input
      class="m-t-10 m-b-10"
      type="textarea"
      placeholder="请输入留言"
      v-model="addGuestForm.guestContent"
      maxlength="40"
      show-word-limit
      rows="5"
    ></el-input>
    <el-button class="W100" @click="addGuest">发表留言</el-button>   
  </div>
</template>

<script>
export default {
  data() {
    return {
      addGuestForm: {
        guestQQ:'',
        guestEmail:'',
        guestName: '',
        guestIcon: '',
        guestContent:'',
      }
    }
  },
  methods: {
    async getInfoByQQ() {
      let res = this.api.get('https://users.qzone.qq.com/fcg-bin/cgi_get_portrait.fcg', {
        params: {
          uins: this.addGuestForm.guestQQ,
          // size: 100
        }
      }, (res) => {
        console.log(res)
      })
      // if(res.code == 200) {
      //   console.log(res)
      //   this.addGuestForm.guestIcon = res.imgurl
      //   this.addGuestForm.guestName = res.name
      //   this.addGuestForm.guestEmail = res.qq + '@qq.com' 
      //   console.log(this.addGuestForm)
      // }else {
      //   this.$message({message: res.msg, type: 'warning', showClose: true, });  
      // }
    },
    async addGuest() {
      if(this.addGuestForm.guestContent == '') {
        this.$message({ message: '留言内容不能为空', type: 'warning', showClose: true, });
      }else {
        let res = await this.api.post('/client/addGuest',{
          ...this.addGuestForm
        })
        if(res.code == 0) {
          this.$emit('getNewList')
          this.addGuestForm.guestContent = ''
          this.$message({message: res.message, type: 'success', showClose: true, })
        }
      }
    }
  },
}
</script>

<style lang="scss">
#add-guest {
  border-top: 1px solid #DCDFE6;
  padding-top: 20px;
  .info {
    display: flex;
  }
}
</style>